<template>
	<view class="content">
		<view class="address-lists">
			<ul class="lists-uls" v-if="addressList.length>0">
				<li class="uls-li" v-for="item, index in addressList">
					<view class="li-top" @click="onAddress(item)">
						<text class="top-Btext">{{item.contacts}} <text class="tel">{{item.phone}}</text> </text>
						<text class="top-Gtext"> {{item.area}} {{item.detail}}</text>
					</view>
					<view class="li-bottom">
						<text class="bottom-left" v-if="item.isDefault==1">默认地址</text>
						<text class="bottom-lef" v-if="item.isDefault!=1"></text>
						<view class="bottom-icon">
							<uni-icons type="trash" size="25" class="icon-delete" @click="del(item)"></uni-icons>
							<uni-icons type="compose" size="25" class="icon-edit" @click="edit(item)"></uni-icons>
						</view>
					</view>
				</li>

				<li class="uls-empy"></li>
			</ul>

			<view class="empty-wrap" v-else>
				<image src="@/static/address/address-empty.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="address-bottom">
			<button class="bottom-Gbutton" @click="onAAdress">新增收货地址</button>
			<view class="bottom-one"></view>
		</view>
	</view>
</template>

<script>
	import {
		allAddress,
		delAddress,
		editAddress
	} from '../../api/apia';
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				type: 'arrow-left',
				customerId: 1,
				addressList: [],
				isEdit: false,
				status: 0,
			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId', 'checkOAddress', 'goodsForm']),
		},
		onLoad(value) {
			this.status = value.status || 0
		},

		onShow() {
			this.getAllAddress()
		},
		methods: {
			...mapMutations('userInfo', ["setCAddress","setDelAddress"]),
			onAAdress() {
				uni.navigateTo({
					url: '/pages/newlyaddress/newlyaddress'
				})
			},
			back() {
				uni.navigateBack()
			},
			getAllAddress() {
				allAddress(this.Info.id).then(res => {
					this.addressList = res.result
				})
			},
			del(val) {
				delAddress(val).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							// duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						this.setDelAddress()
						this.getAllAddress()
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none',
							// duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				})
			},
			edit(val) {
				console.log(val);
				// uni.setStorage({
				// 	key: 'editaddress',
				// 	data: val,
				// 	success: function(res) {
				// 		console.log(res);
				// 	}
				// })
				uni.navigateTo({
					url: `/pages/editaddress/editaddress?id=${val.id}`
				})
			},

			// 返回上一页
			onAddress(item) {
				if (this.status == 1) {
					this.setCAddress(item)
					uni.redirectTo({
						url: '/pages/addOrder/addOrder'
					})
				}
			},


		},

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #f7f7f7;
		// padding-top: 25rpx;

		.new-head {
			width: 100%;
			padding: 75rpx 25rpx 15rpx 25rpx;
			background-color: #fff;

			.head-Sbox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				margin-top: 10rpx;

				.head-icon {
					position: absolute;
					left: 25rpx;
					top: 12rpx;
				}

				.head-input {
					width: 100%;
					background-color: #f7f7f7;
					height: 70rpx;
					padding: 0 80rpx;
					// border-radius: rpx;
					font-size: 25rpx;
					border-radius: 35rpx;
				}

				.head-Stext {
					display: block;
					height: 70rpx;
					width: 140rpx;
					background-color: #fc532d;
					border-radius: 35rpx;
					line-height: 70rpx;
					text-align: center;
					position: absolute;
					right: 0;
					top: 0;
					color: #fff;
					font-size: 30rpx;
				}
			}
		}

		.address-lists {
			padding: 24rpx 32rpx;

			.lists-uls {
				margin-left: -80rpx;

				.uls-li {
					margin-top: 15rpx;
					background-color: #fff;
					padding: 30rpx 25rpx;
					border-radius: 20rpx;
					list-style: none;

					.li-top {
						.top-Btext {
							display: block;
							font-size: 30rpx;

							.tel {
								margin-left: 30rpx;
							}
						}

						.top-Gtext {
							display: block;
							font-size: 23rpx;
							color: #7f7f7f;
							margin-top: 20rpx;
						}
					}

					.li-bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 25rpx;

						.bottom-left {
							width: 140rpx;
							height: 40rpx;
							display: block;
							background-color: #fee9e7;
							color: $uni-text-color-red;
							border-radius: 20rpx;
							line-height: 40rpx;
							text-align: center;
							font-size: 25rpx;


						}

						.icon-delete {
							margin-right: 50rpx;
						}
					}
				}

				.uls-li:nth-child(1) {
					margin-top: 0;
				}

				.uls-empy {
					margin-top: 15rpx;
					padding: 30rpx 25rpx;
					border-radius: 20rpx;
					height: 100rpx;
					list-style: none;
				}
			}
		}

		.empty-wrap {
			width: 100%;
			height: 100%;
			text-align: center;

			image {
				margin-top: 376rpx;
				width: 480rpx;
				height: 480rpx;
			}
		}

		.address-bottom {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9999;
			background-color: #fff;
			// padding: 14rpx 40rpx;
			text-align: center;

			.bottom-Gbutton {
				margin: 14rpx 40rpx 50rpx 40rpx;
				background: linear-gradient(to right, #ff2b28, #fd6e2b);
				// width: 90%;
				height: 75rpx;
				line-height: 75rpx;
				background-color: #434345;
				color: #fff;
				border-radius: 75rpx;
			}

			// .bottom-one {
			// 	margin: 14rpx 259rpx 17rpx 259rpx;
			// 	background-color: #000000;
			// 	height: 10rpx;
			// 	border-radius: 15rpx;
			// }
		}

	}
</style>